/**
 * 半径，画布宽度，画布高度，画布x内边距，画布y内边距
 */
var R = 17,
	canvasWidth = 400,
	canvasHeight = 320,
	OffsetX = 30,
	OffsetY = 30;
var circleArr = [];

function createCirclePoint(diffX, diffY) {
	for (var row = 0; row < 6; row++) {
		for (var col = 0; col < 6; col++) {
			// 计算圆心坐标
			var Point = {
				X: (OffsetX + col * diffX + (col * 3 + 1) * R),
				Y: (OffsetY + row * diffY + (row * 3 + 1) * R)
			};
			circleArr.push(Point);
		}
	}
	return circleArr;
}
window.onload = function() {
	console.log(document.getElementById('lockCanvas'))
	var canvas = document.getElementById("lockCanvas");
	canvasWidth = document.documentElement.clientWidth; //网页可见区域宽

	canvasHeight = document.documentElement.clientHeight * 0.7;
	console.log(canvasWidth,canvasHeight)
	canvas.width = canvasWidth;
	canvas.height = canvasHeight;
	var cxt = canvas.getContext("2d");
	/**
	 * 每行3个圆
	 * OffsetX为canvas x方向内边距
	 * */
	var X = (canvasWidth - 5 * OffsetX - R * 2 * 6) / 5;
	var Y = (canvasHeight - 5 * OffsetY - R * 2 * 6) / 5;

	createCirclePoint(X, Y);


	//CW=2*offsetX+R*2*3+2*X
	Draw(cxt, circleArr, [], null);
	bindEvent(canvas, cxt);
}

function Draw(cxt, circleArr, pwdArr, touchPoint) {
	if (pwdArr.length > 0) {
		cxt.beginPath();
		for (var i = 0; i < pwdArr.length; i++) {
			var pointIndex = pwdArr[i];
			cxt.lineTo(circleArr[pointIndex].X, circleArr[pointIndex].Y);
		}
		cxt.lineWidth = 3;
		cxt.strokeStyle = "#f8b500"; //连接线颜色
		cxt.globalAlpha = 0.3;
		cxt.stroke();
		cxt.closePath();
		if (touchPoint != null) {
			var lastPointIndex = pwdArr[pwdArr.length - 1];
			var lastPoint = circleArr[lastPointIndex];
			cxt.beginPath();
			cxt.moveTo(lastPoint.X, lastPoint.Y);
			cxt.lineTo(touchPoint.X, touchPoint.Y);
			cxt.stroke();
			cxt.closePath();
		}
	}
	for (var i = 0; i < circleArr.length; i++) {
		var Point = circleArr[i];
		cxt.fillStyle = "#ffffff"; //圆框颜色
		cxt.globalAlpha = 0.3;
		cxt.beginPath();
		cxt.arc(Point.X, Point.Y, R, 0, Math.PI * 2, true);
		cxt.closePath();
		cxt.fill();
		cxt.globalAlpha = 0.3;
		cxt.fillStyle = "#ffffff"; //圆心颜色
		cxt.beginPath();
		cxt.arc(Point.X, Point.Y, R - 3, 0, Math.PI * 2, true);
		cxt.closePath();
		cxt.fill();
		if (pwdArr.indexOf(i) >= 0) {
			cxt.fillStyle = "#fceabb"; //选中后圆点颜色
			cxt.globalAlpha = 1;
			cxt.beginPath();
			cxt.arc(Point.X, Point.Y, R - 2, 0, Math.PI * 2, true);
			cxt.closePath();
			cxt.fill();
		}

	}
}

/**
 * 计算选中的密码 
 */
function getSelectPwd(touches, pwdArr) {
	for (var i = 0; i < circleArr.length; i++) {
		var currentPoint = circleArr[i];
		var xdiff = Math.abs(currentPoint.X - touches.pageX);
		var ydiff = Math.abs(currentPoint.Y - touches.pageY);
		var dir = Math.pow((xdiff * xdiff + ydiff * ydiff), 0.5);
		if (dir > R || pwdArr.indexOf(i) >= 0)
			continue;
		pwdArr.push(i);
		break;
	}
}

/**
 * 给画布绑定事件
 */
function bindEvent(canvas, cxt) {
	var pwdArr = [];
	canvas.addEventListener("mousedown", function(e) {
		getSelectPwd(e, pwdArr);
	}, false);
	canvas.addEventListener("mousemove", function(e) {
		e.preventDefault();
		var touches = e;
		getSelectPwd(touches, pwdArr);
		cxt.clearRect(0, 0, canvasWidth, canvasHeight);
		Draw(cxt, circleArr, pwdArr, {
			X: e.pageX,
			Y: e.pageY
		});
	}, false);
	canvas.addEventListener("mouseup", function(e) {
		cxt.clearRect(0, 0, canvasWidth, canvasHeight);
		Draw(cxt, circleArr, pwdArr, null);
		window.login(pwdArr);
		pwdArr = [];
	}, false);
}
